<template>
  <div class="approved-status">
    <h3>申请已通过审批</h3>
    <span style="line-height: 25px">请在竞赛结束后上报结果：</span>
    <el-radio-group v-model="awardStatus" @change="handleAwardChange">
      <el-radio :label="0">未获奖</el-radio>
      <el-radio :label="1">获奖</el-radio>
    </el-radio-group>

    <div v-if="awardStatus === 1" class="award-details">
      <!-- 选择获奖后显示上传文件和填写竞赛全名 -->
      <el-form-item label="获奖全称：">
        <el-input
          v-model="rewardName"
          placeholder="请输入获奖全称"
          class="competition-name-input"
          :maxlength="50"
        />
      </el-form-item>

      <!-- 添加获奖时间选择器 -->
      <el-form-item label="获奖时间：">
        <el-date-picker
          v-model="awardDate"
          type="datetime"
          placeholder="请选择获奖时间"
          style="width: 100%;"
          format="YYYY/MM/DD HH:mm:ss"
          @change="handleDate_apply"
          :disabled="awardStatus === 0"  
        />
      </el-form-item>
      
      <el-upload
        ref="upload"
        class="upload-demo"
        action="#"
        :limit="1"
        :auto-upload="false"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-change="handleFileChange"
        :on-exceed="handleExceed"
        :on-remove="handleRemove"
        style="margin-top: 20px"
      >
        <template v-slot:trigger>
          <el-button type="primary">上传证明文件</el-button>
        </template>
      </el-upload>
    </div>

    <!-- 提交按钮 -->
    <div class="actions" style="margin-top: 20px;">
      <el-button @click="submitApplication" type="success">提交</el-button>
    </div>
  </div>
</template>

<script>
import { uploadFile, submitWithoutAward } from "@/api/competition/index.js"; // 导入两个接口
import { convertISOToBasicString } from "@/utils/common1.js";
export default {
  props: {
    // 接收父组件传来的竞赛申请数据
    application: Object
  },
  data() {
    return {
      awardStatus: 0, // 0: 未获奖, 1: 获奖
      rewardName: "", // 竞赛全名
      awardDate: null, // 获奖时间
      fileList: [], // 上传的文件列表
    };
  },
  methods: {

    handleDate_apply(value){
      this.awardDate = convertISOToBasicString(value);
    },

    // 处理奖项选择变化
    handleAwardChange(value) {
      console.log("选择的奖项状态:", value);
    },
    // 文件上传前的处理函数
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isPDF = file.type === 'application/pdf';
      
      if (!isImage && !isPDF) {
        this.$message.error('只能上传图片或PDF文件');
        return false; // 阻止上传
      }
      
      return true; // 允许上传
    },


    handleFileChange(file, fileList) {
      console.log("文件改变了")
      if (!file || !file.name) {
            console.log("无效文件，跳过");
            return; // 如果文件无效，直接跳过
          }

          // 使用文件扩展名来判断文件类型
          const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
          const fileExtension = file.name.toLowerCase().slice(file.name.lastIndexOf('.')); // 获取文件扩展名

          console.log("文件扩展名：", fileExtension); // 输出文件扩展名，确认是否正确

          if (!validExtensions.includes(fileExtension)) {
            this.$message.error('只能上传图片或PDF文件');
            // 如果文件不符合要求，在这里清除文件列表
            this.fileList = fileList.filter(f => {
            const fileExtension = f.name.toLowerCase().slice(f.name.lastIndexOf('.'));
            const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
            return validExtensions.includes(fileExtension);
          });
          return;
          }      
      this.fileList = fileList.map((f) => {
        // 如果 raw 属性丢失，手动补充
        if (!f.raw) {
          f.raw = f.originFileObj || f; // originFileObj 是 el-upload 中上传的原始文件对象
        }
        return f;
      });
    },

    // 文件数量超出时的处理
    handleExceed(files) {
      const file = files[0];
      // 检查 file 和 file.type 是否有效
      if (!file ) {
        this.$message.error('文件无效');
        return false; // 如果没有文件名，直接返回 false
      }

      // 使用文件扩展名来判断文件类型
      const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
      const fileExtension = file.name.toLowerCase().slice(file.name.lastIndexOf('.')); // 获取文件扩展名

      console.log("文件扩展名：", fileExtension); // 输出文件扩展名，确认是否正确

      if (!validExtensions.includes(fileExtension)) {
        this.$message.error('只能上传图片或PDF文件');
        return;
      }      
      console.log("文件超出了！！！")
      this.$refs.upload.clearFiles(); // 清空当前文件
      file.uid = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; // 生成唯一 ID
      file.raw = file.originFileObj || file; // 确保 raw 属性存在
      this.fileList = [file]; // 更新为仅包含一个文件
    },
    // 文件被删除时的处理
    handleRemove(file, fileList) {
      // 处理文件删除后的逻辑
      console.log('文件被删除:', file);
      // 更新文件列表
      this.fileList = fileList;
      // 可以在这里执行额外的操作，比如通知用户文件已被删除
      this.$message.success('文件已删除');
    },
    // 提交申请
    async submitApplication() {
      console.log("awardStatus:" + this.awardStatus)
      if (this.awardStatus === 1 && !this.rewardName) {
        this.$message.error('请填写竞赛全名');
        return;
      }
      if (this.awardStatus === 1 && !this.awardDate) {
        this.$message.error('请选择获奖时间');
        return;
      }
      if (this.awardStatus === 1 && this.fileList.length === 0) {
        this.$message.error('请上传证明文件');
        return;
      }

      try {
        let data;
        if (this.awardStatus === 1) {
          // 调用上传文件的接口
          // 选择获奖，调用 uploadFile 接口
          console.log("applicationId:", this.application.id);
          console.log("file:", this.fileList[0].file);
          console.log("rewardName:", this.rewardName);
          console.log("awardDate:", this.awardDate);
          data = await uploadFile(this.application.id, this.fileList[0].raw, this.rewardName, this.awardDate);
        } else {
          // 调用未获奖的接口
          data = await submitWithoutAward(this.application.id);
        }

        if (!data.code) {
          this.$message.success('提交成功');
          this.$emit("hanleQeury");
        } else {
          this.$message.error('提交失败，请重试');
        }
      } catch (error) {
        console.error('提交失败:', error);
        this.$message.error('提交失败，请检查网络或稍后再试！');
      }

      // 通知父组件关闭 dialog
      this.$emit('closeDialog');
    }
  }
};
</script>

<style scoped>
.approved-status {
  padding: 20px;
  border: 1px solid #ebeef5;
  background-color: #f9fafc;
  border-radius: 5px;
}
.award-details {
  margin-top: 20px;
}
.actions {
  display: flex;
  justify-content: flex-end;
}
.upload-demo {
  margin-top: 10px;
}

h3 {
  color: #0ab604;
  line-height: 30px;
  font-weight: bold;
  font-size: 16px;
}
</style>
